<template>
    <div class="newaddress">
        <div class="newaddresstop">
            <div class="container">
                <font @click="$router.push('/')"><</font>
                <font>选择所在学校</font>
                <font @click="$router.push('/address')">新增地址</font>
            </div>
        </div>
        <div class="search">
            <div class="container">
                <div @click="$router.push('/cityselect')">
                    <font v-show="city_name">{{city_name}}</font>&emsp;&emsp;
                    <font v-show="!city_name">请选择</font>&emsp;&emsp;
                    <i class="el-icon-caret-bottom"></i>
                </div>
                <input type="text" v-model="schoolinput" placeholder="请输入您的学校" @input="schoolshow">
            </div>
        </div>
        <div style="position: relative;">
            <div class="schoolselect">
                <div class="schoollist" :style="{display:isshow?'block':'none'}">
                    <div  v-show="school.length!=0" v-for="item,index in school" class="dress" style="border-bottom: 1px solid gainsboro;">
                       <div @click="setdress(item)">
                           <h3>{{item}}</h3>
                           <font>{{province}} {{city_name}} {{item}}</font>
                       </div>
                    </div>
                    <div v-show="school.length==0" style="height: 100px;color: gainsboro;display: flex;justify-content:space-around;align-items: center;">
                        <h1>未找到对应学校</h1>
                    </div>
                </div>
            </div>
            <div :style="{display:isshow?'none':'block'}">
                <div class="container">
                    <font style="color: gray;">当前地址</font>
                </div>
                <div class="search">
                    <div  v-show="this.$store.state.school" class="container">
                        {{this.$store.state.school}}
                    </div>
                    <div  v-show="!this.$store.state.school" class="container">
                        请选择您的学校
                    </div>
                </div>
                <div class="dress">
                    <font style="color: gray;">收货地址</font>
                </div>
                <div class="search">
                    <div class="dress" v-show="$store.state.dress">
                        <font style="display:flex;align-items:center;">
                            <h4>{{this.$store.state.dress.dressname}} {{this.$store.state.dress.dresssex}}</h4>
                            <h4 style="color:gray;">{{this.$store.state.dress.dressphone}}</h4>
                        </font>
                        <h3 style="color:gray;">{{this.$store.state.dress.dresslou}} {{this.$store.state.dress.dresssu}}</h3>
                    </div>
                    <div v-show="!$store.state.dress" class="container">
                        未设置收货地址
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapMutations} from 'vuex';
    export default {
        name: "newaddress",
        data(){
            return{
                isshow:false,
                schoollist:this.$store.state.school_list,
                province_name:this.$store.state.province,
                city_name:this.$store.state.city,
                schoolinput:'',
                school:[],
                province:this.$store.state.province
            }
        },
        methods:{
            ...mapMutations(['setschool']),
            schoolshow(){
             this.school=[]
             if(this.schoolinput==false){
                 this.noshow();
             }else{
                 var reg=new RegExp(this.schoolinput);
                 this.isshow=true;
                 for(var i=0;i<this.schoollist.length;i++){
                     if(reg.test(this.schoollist[i])){
                         this.school.push(this.schoollist[i])
                     };
                 };
             }
            },
            noshow(){
             this.isshow=false;
            },
            setdress(e){
                this.axios.post('http://127.0.0.1:3000/school',{phone:this.$store.state.phone,school:e})
                    .then((res)=>{
                        if(res.data.msg==200){
                            this.$store.commit('setschool',e);
                            this.school=[];
                            this.noshow()
                            this.schoolinput=''
                        }else{
                            alert('未知原因，设置失败')
                        }
                    })
                    .catch((err)=>{
                        console.log(err)
                        alert('未知原因，设置失败')
                    })

            },

        }
    }
</script>

<style scoped>
    .newaddress{
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        overflow: auto;
        background: rgb(244,244,244);
    }
    .newaddresstop{
        background: rgb(0,161,255);
        color: white;
    }
    .container{
        width: 90%;
        display: flex;
        justify-content: space-between;
        margin: auto;
        font-size: 18px;
        padding: 18px 0;
        align-items: center;
    }
    .search{
        background: white;
    }
    .search input{
        outline: none;
        border: none;
        text-indent: 1rem;
        width: 70%;
        height: 50px;
        background: rgb(244,244,244);
    }
    .dress{
        width: 90%;
        margin: auto;
        font-size: 18px;
        padding: 18px 0;
    }
    .schoolselect{
        background: white;
        width: 100%;
        position: absolute;
        top: 0;
    }
</style>